<template>
	<view class="content uni-flex-column" :style="bgStyle">
		<!-- <view class="title">我的</view> -->
		<!-- 使用自定义导航栏 -->
		<CustomNavBar title="我的" />
		<view class="center">
			<view class="top">
				<view class="uni-flex uni-align-center">
					<!-- 头像、昵称和手机号放在一个view中 -->
					<view class="user-info-container" @click="toLogin">
						<!-- 登录时显示 -->
						<view class="photo_view" v-if="isLogin">
							<!-- 头像 -->
							<image :src="localInfo?.avatar" class="photo" />
							<view class="edit">
								<image :src="`${$ImgBaseUrl}icon_photo_edit.png`" class="img" />
							</view>
						</view>
						<!-- 未登录时显示 -->
						<view class="photo_view" v-if="!isLogin">
							<!-- 头像 -->
							<image :src="`${$ImgBaseUrl}avatar_default.png`" class="photo" />
						</view>
						<view class="info">
							<view class="name-container">
								<text class="name">{{ displayName }}</text>
								<!-- 将二维码图标放在这里 -->
								<view class="qr-code-container" @click.stop='goQRcodeDetail' v-if="isLogin">
									<image :src="`${$ImgBaseUrl}MyQRcode.png`" class="ercode" />
								</view>
							</view>
							<text class="phone">{{ isLogin ? userInfoData.phone : '登录后获取更多功能信息' }}</text>
						</view>
					</view>
				</view>
				<view class="uni-flex uni-align-center">
					<view class="sign uni-flex-column-center" @click="openInfo">
						<image :src="`${$ImgBaseUrl}myInfoIcon.png`" />
						<text class="text">消息中心</text>
					</view>
					<view class="sign uni-flex-column-center" @click="signContract" v-if="isLogin">
						<image :src="`${$ImgBaseUrl}sign_contract.png`" />
						<text class="text">我要签约</text>
					</view>
					<view class="sign uni-flex-column-center" @click="handleToast">
						<image :src="`${$ImgBaseUrl}customer_service.png`" />
						<text class="text">客服</text>
					</view>
					<view class="sign uni-flex-column-center" @click="toSetting">
						<image :src="`${$ImgBaseUrl}setting.png`" />
						<text class="text">设置</text>
					</view>
				</view>
			</view>
			<view class="money">
				<view class="left" :style="bgStyleMoney">
					<view class="leftMoney-box">
						<text class="title_1">本月收益 (元)</text>
						<text class="money">{{ earningsInfo.monthEarnings||'-' }}</text>
					</view>
					<view class="button-left">
						<text class="select" @click="goOrderCalendar">查看</text>
						<text class="record" @click="toProfitWithdrawal">提现</text>
					</view>
				</view>
				<!-- <view class="right">
					<view class="title-box">
						<text class="title_1">账户余额 (元)</text>
						<text class='bill-text' @click="handleToast">账单</text>
					</view>
					<text class="money">{{ earningsInfo.rechargeAmount||'-' }}</text>
					<view class="button">
						<text class="select" @click="toRecharge(0)">充值</text>
						<text class="record" @click="toRecharge(1)">提现</text>
					</view>
				</view> -->
			</view>
			<view class="menu_1">
				<view class="menu" @click="goPersonalFavorites">
					<image :src="`${$ImgBaseUrl}collect.png`" class="icon" />
					<text class="text">收藏</text>
				</view>
				<view class="menu" @click="goBrowsingHistory">
					<image :src="`${$ImgBaseUrl}browse.png`" class="icon" />
					<text class="text">浏览</text>
				</view>
				<view class="menu" @click="toCardCoupons">
					<image :src="`${$ImgBaseUrl}card.png`" class="icon" />
					<text class="text">卡劵</text>
				</view>
			</view>
			<SlideToAccept :initial-is-accepting="false" :slide-threshold="0.8" @accept-start="handleAcceptStart"
				@accept-stop="handleAcceptStop" />

			<view class="menu_2">
				<view class="menu2_1" @click="toRelease">
					<image :src="`${$ImgBaseUrl}release_bg.png`" class="bg-image" mode="aspectFill" />
					<text class="text_1 text_color">我要发布</text>
					<text class="text_2">这里是文字说明</text>
					<view class="text_3 text_color">去发布 <uni-icons type="right" size="15" color="#DA9500"></uni-icons>
					</view>
					<image :src="`${$ImgBaseUrl}release.png`" class="icon" mode="aspectFill" />
				</view>
				<view class="menu2_2" @click="consumerOrder">
					<image :src="`${$ImgBaseUrl}my_order_bg.png`" class="bg-image" mode="aspectFill" />
					<text class="text_1 text_color">我的订单</text>
					<text class="text_2">这里是文字说明</text>
					<view class="text_3 text_color">去查看 <uni-icons type="right" size="15" color="#1669DA"> </uni-icons>
					</view>
					<image :src="`${$ImgBaseUrl}my_order.png`" class="icon" mode="aspectFill" />
				</view>
				<view class="menu2_3" @click="goServiceOrder">
					<image :src="`${$ImgBaseUrl}service_order_bg.png`" class="bg-image" mode="aspectFill" />
					<text class="text_1 text_color">服务订单</text>
					<text class="text_2">这里是文字说明</text>
					<view class="text_3 text_color">去查看 <uni-icons type="right" size="15" color="#DD5737"></uni-icons>
					</view>
					<image :src="`${$ImgBaseUrl}service_order.png`" class="icon" mode="aspectFill" />
				</view>
			</view>
			<view class="banner">
				<image :src="`${$ImgBaseUrl}baicheng-banner.png`" class="icon" mode="widthFix" lazy-load
					@click="goBaichengOperations" />
			</view>
			<view class="menu_3">
				<view class="title3">常用工具</view>
				<view class="menu3_body">
					<view class="item" @click="handleToast">
						<image :src="`${$ImgBaseUrl}service_query.png`" class="icon" />
						<text class="text">服务查询</text>
					</view>
					<view class="item" @click="handleToast">
						<image :src="`${$ImgBaseUrl}log.png`" class="icon" />
						<text class="text">零工日志</text>
					</view>
					<view class="item" @click="handleToast">
						<image :src="`${$ImgBaseUrl}remind.png`" class="icon" />
						<text class="text">零付提醒</text>
					</view>
					<view class="item" @click="handleToast">
						<image :src="`${$ImgBaseUrl}enterprise_certification.png`" class="icon" />
						<text class="text">企业认证</text>
					</view>
					<view class="item" @click="handleToast">
						<image :src="`${$ImgBaseUrl}competence_center.png`" class="icon" />
						<text class="text">能力中心</text>
					</view>
					<view class="item" @click="goReportingCenter">
						<image :src="`${$ImgBaseUrl}report.png`" class="icon" />
						<text class="text">举报中心</text>
					</view>
					<view class="item" @click="handleToast">
						<image :src="`${$ImgBaseUrl}my-invoice.png`" class="icon" />
						<text class="text">开票历史</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ImgBaseUrl
	} from "@/utils/domain.js";
	import CustomNavBar from "@/components/custom-navbar/index.vue";
	import SlideToAccept from './SlideToAccept.vue'
	import {
		computed,
		onMounted,
		ref,
		reactive,
	} from "vue";
	import {
		userInfo
	} from "@/api/user.js";
	import {
		monthEarnings
	} from "@/api/extract.js";

	import {
		decrypt,
		encrypt
	} from "@/utils/encryptionUtil.js";
	import {
		useStore
	} from 'vuex';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	const store = useStore();
	// 获取 userInfo（响应式）
	// const userInfoData = computed(() => store.state.userInfo);
	const token = computed(() => store.state.access_token);
	const userInfoData = ref({})
	const isLogin = ref(false)
	const localInfo = ref('')

	onMounted(() => {
		const token = uni.getStorageSync('access_token')
		getLocalStorageAvatar()
		getUserInfo()
		getMonthEarnings()

	});

	onShow(() => {
		getLocalStorageAvatar()
		getMonthEarnings()
	})
	// 开始接单时的回调
	const handleAcceptStart = (data) => {
		console.log("页面：开始接单", data.startTime); // data包含组件传递的开始时间
		// 可添加额外逻辑：如调用“开始接单”接口、记录日志等
	};

	// 停止接单时的回调
	const handleAcceptStop = (data) => {
		console.log("页面：停止接单", data.stopTime); // data包含组件传递的停止时间
		// 可添加额外逻辑：如调用“停止接单”接口、计算接单时长等
	};
	// 从本地localstorage中获取头像
	const getLocalStorageAvatar = () => {
		let localUserInfo = uni.getStorageSync('user_info') || {};

		// 如果是字符串，则尝试解析；否则直接使用对象
		if (typeof localUserInfo === 'string') {
			try {
				localUserInfo = JSON.parse(localUserInfo);
			} catch (e) {
				console.error('解析本地存储失败:', e);
				localUserInfo = {}; // 解析失败时使用空对象
			}
		}

		localInfo.value = localUserInfo;
		// console.log('localInfo', localInfo.value);
	};

	const getUserInfo = async () => {
		try {
			if (!token.value) {
				isLogin.value = false;
				return;
			}

			const info = await userInfo();
			if (info.code == 200) {
				isLogin.value = true;
				userInfoData.value = info.data;
				store.commit('setUserInfo', info.data);
			} else {
				// 登录失效,清空保存的token和用户数据
				isLogin.value = false;
				store.commit('clearLoginInfo');

				// 可选：显示提示信息
				// if (info.code === 401) {
				// 	uni.showToast({
				// 		title: '登录已过期，请重新登录',
				// 		icon: 'none'
				// 	});
				// }
			}
		} catch (error) {
			console.error('获取用户信息失败:', error);
			isLogin.value = false;
			store.commit('clearLoginInfo');
		}
	};

	// 收益、余额
	const earningsInfo = reactive({
		monthEarnings: 0,
		rechargeAmount: 0,
	})
	const getMonthEarnings = () => {
		monthEarnings().then((res) => {
			if (res.code == 200) {
				earningsInfo.monthEarnings = res.data?.monthEarnings ?? 0
				earningsInfo.rechargeAmount = res.data?.rechargeAmount ?? 0
			} else {

			}
		})
	}

	const toLogin = () => {
		console.log('111111')
		// 如果没有登录跳转到登录页面
		if (!isLogin.value) {
			uni.redirectTo({
				url: "/pages/login/index"
			});
		} else {
			uni.navigateTo({
				url: "/pages/personalCenter/userDetail/personalData",
			});
		}
	}

	// 显示逻辑（登录显示截取昵称，未登录显示默认文本）
	const displayName = computed(() => {
		if (!isLogin.value) return '点击登录'

		// 安全访问属性
		const name = localInfo.value?.nikeName || ''
		return name.length > 10 ? name.substring(0, 10) + '...' : name
	})
	// 收益提现
	const toProfitWithdrawal = () => {
		uni.navigateTo({
			url: "/pages/tabBars/account/profitWithdrawal",
		});
	};
	const toRecharge = (type) => {
		uni.navigateTo({
			url: "/pages/tabBars/account/account?type=" + type,
		});
	};
	// 我要发布
	const toRelease = () => {
		uni.navigateTo({
			url: "/pages/release/release",
		});
	};
	// 我要签约
	const signContract = () => {
		uni.navigateTo({
			url: "/pages/contract/contract",
		});
	};
	// 跳转到消息中心页面
	const openInfo = () => {
		uni.navigateTo({
			url: "/pages/chat/list/index",
		});
	};
	// 设置
	const toSetting = () => {
		uni.navigateTo({
			url: "/pages/personalCenter/setting/index",
		});
	};
	// 卡劵
	const toCardCoupons = () => {
		uni.navigateTo({
			url: "/pages/tabBars/cardCoupons/redEnvelopeCard",
		});
	};
	const bgStyle = computed(() => ({
		backgroundImage: `url(${ImgBaseUrl}my_bg.png)`,
	}));
	const bgStyleMoney = computed(() => ({
		backgroundImage: `url(${ImgBaseUrl}my-income-bg.png)`,
	}));

	// 跳转到二维码详情页
	const goQRcodeDetail = () => {
		// 将 userInfoData.value 转换为字符串（JSON.stringify）并传递
		uni.navigateTo({
			url: "/pages/personalCenter/userDetail/QRcodeDetails"
		});
	}

	// 跳转到服务者订单页面
	const goServiceOrder = (() => {
		uni.navigateTo({
			url: "/pages/order/ServiceOrder/OrderList"
		});
	})

	// 跳转到服务日历页面（修改跳转逻辑，添加参数）
	const goOrderCalendar = () => {
		uni.navigateTo({
			// 添加参数from=calendar标识来源
			url: "/pages/order/ServiceOrder/OrderList?from=calendar"
		});
	}

	// 我的订单--消费者订单
	const consumerOrder = () => {
		uni.navigateTo({
			url: "/pages/order/consumerOrder/orderList",
		});
	}
	// 我的钱包
	const goWallet = () => {
		uni.navigateTo({
			url: "/pages/personalCenter/wallet/wallet",
		});
	}
	// 浏览记录
	const goBrowsingHistory = (() => {
		uni.navigateTo({
			url: "/pages/tabBars/BrowsingHistory/index"
		});
	})
	// 我的收藏
	const goPersonalFavorites = (() => {
		uni.navigateTo({
			url: "/pages/tabBars/PersonalFavorites/PersonalFavoritesView"
		});
	})
	// 百城运营
	const goBaichengOperations = () => {
		uni.navigateTo({
			url: "/pages/personalCenter/BaichengOperations/BaichengOperationsPage"
		});
	}
	// 举报中心
	const goReportingCenter = () => {
		uni.navigateTo({
			url: "/pages/reportCenter/report",
		});
	}


	// 点击未开发的功能模块时进行提示
	const handleToast = () => {
		uni.showToast({
			title: '功能开发中',
			icon: 'none'
		});
	}
</script>
<style lang="scss" scoped>
	.content {
		width: 100%;
		box-sizing: border-box;
		height: 100vh;
		// background-image: var(--bg-url);
		// background-size: 100% auto;
		/* 宽度100%，高度自动 */
		background-repeat: no-repeat;
		background-position: top center;
		/* 关键：图片顶部对齐 */

		.center {
			box-sizing: border-box;
			// height: calc(100vh - 250rpx);
			padding: 0 24rpx 200rpx;
			overflow-y: auto;
			flex: 1;

			.title {
				font-weight: 500;
				font-size: 36rpx;
				color: #303133;
				line-height: 44px;
				text-align: center;
				height: 44px;
			}

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.user-info-container {
					display: flex;
					align-items: center;
					flex-shrink: 0;

					.photo_view {
						position: relative;

						.photo {
							width: 98rpx;
							height: 98rpx;
							border-radius: 50%;
						}

						.edit {
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							right: 0;
							bottom: 10rpx;
							width: 28rpx;
							height: 28rpx;
							background: #2f80ed;
							border: 1px solid #ffffff;
							border-radius: 50%;

							.img {
								width: 16rpx;
								height: 16rpx;
							}
						}
					}

					.info {
						margin-left: 24rpx;
						min-width: 235rpx;
						flex-shrink: 0;

						.name-container {
							display: flex;
							align-items: center;

							.name {
								font-weight: 500;
								font-size: 30rpx;
								color: #333333;
								line-height: 42rpx;
							}

							.qr-code-container {
								margin-left: 20rpx;
								/* 调整二维码与名称的间距 */
								display: flex;
								align-items: center;

								.ercode {
									width: 32rpx;
									height: 32rpx;
								}
							}
						}

						// .ercode {
						// 	width: 32rpx;
						// 	height: 32rpx;
						// 	margin-left: 20rpx;
						// }

						.phone {
							font-weight: 400;
							font-size: 24rpx;
							color: #999;
							line-height: 34rpx;
							margin-top: 8rpx;
							white-space: nowrap; // 强制文本在一行显示，不自动换行
							overflow: hidden; // 隐藏超出容器宽度的文本
							text-overflow: ellipsis; // 文本超长时显示省略号（可选，优化极端场景）
						}
					}
				}

				// .qr-code-container {
				// 	height: 100%;
				// 	display: flex;
				// 	// align-items: center;
				// 	justify-content: center;

				// 	.ercode {
				// 		width: 32rpx;
				// 		height: 32rpx;
				// 	}
				// }

				// padding: 0rpx 24rpx;

				.sign {
					margin-left: 19rpx;
					&:first-child {
						margin-left: 0;
					}

					image {
						width: 44rpx;
						height: 44rpx;
					}

					.text {
						margin-top: 10rpx;
						color: #333333;
						font-size: 22rpx;
					}
				}
			}

			.money {
				// display: flex;
				// height: 234rpx;
				margin-top: 24rpx;

				.left {
					display: flex;
					// flex-direction: column;
					justify-content: space-between;
					height: 153rpx;
					flex: 1;
					background-repeat: no-repeat;
					background-position: top center;
					border-radius: 20rpx;
					padding: 20rpx 45rpx 20rpx 40rpx;
					box-sizing: border-box;


					.leftMoney-box {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}

					.button-left {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 24rpx;
						font-weight: 400;

						width: 110rpx;

						.select {
							height: 46rpx;
							line-height: 46rpx;
							text-align: center;
							border-radius: 34rpx;
							border: 1rpx solid #C2C2C2;
							color: #333333;
						}

						.record {
							height: 46rpx;
							line-height: 46rpx;
							text-align: center;
							border-radius: 34rpx;
							background: #FEB310;
							color: #FFFFFF;
						}
					}

					.title_1 {
						color: #666;
						font-size: 24rpx;
					}

					.money {
						color: #feb310;
						font-size: 34rpx;
						font-weight: 600;
					}
				}

				.right {
					flex: 1;
					background: #f8f9ff;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					flex: 1;
					padding: 26rpx 23rpx;

					.title-box {
						display: flex;
						justify-content: space-between;

						.bill-text {
							color: #2F80ED;
							font-family: 400;
							font-size: 24rpx;
						}

						.title_1 {
							color: #666;
							font-size: 24rpx;
						}
					}

				}

				.money {
					color: #2f63ed;
					font-size: 34rpx;
					font-weight: 600;
				}

				.button {
					display: flex;
					margin-top: 30rpx;

					.select {
						flex: 1;
						height: 54rpx;
						line-height: 54rpx;
						text-align: center;
						margin-right: 25rpx;
						border-radius: 34rpx;
						border: 1rpx solid #2f80ed;
						font-size: 28rpx;
						color: #2f80ed;
					}

					.record {
						flex: 1;
						height: 54rpx;
						line-height: 54rpx;
						text-align: center;
						border-radius: 34rpx;
						border: 1rpx solid #2f80ed;
						font-size: 28rpx;
						color: #2f80ed;
					}
				}

			}

			.menu_1 {
				background: white;
				border-radius: 20rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 21rpx;

				.menu {
					display: flex;
					align-items: center;

					.icon {
						width: 30rpx;
						height: 30rpx;
					}

					.text {
						margin-left: 6rpx;
						font-size: 28rpx;
						color: #303133;
					}
				}
			}


			.menu_2 {
				display: flex;
				margin-top: 21rpx;
				height: 209rpx;

				/* 根据图片高度设置 */
				.menu2_1 {
					position: relative;
					flex: 1;
					margin-right: 20rpx;

					.text_color {
						color: #da9500;
					}
				}

				.menu2_2 {
					position: relative;
					flex: 1;
					margin-right: 20rpx;

					.text_color {
						color: #1669da;
					}
				}

				.menu2_3 {
					position: relative;
					flex: 1;

					.text_color {
						color: #dd5737;
					}
				}

				.bg-image {
					position: absolute;
					width: 100%;
					height: 100%;
				}

				.icon {
					width: 88rpx;
					height: 88rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}

				.text_2 {
					color: #999999;
					font-size: 24rpx;
					margin: 10rpx 0 0 22rpx;
					position: relative;
					/* 添加定位 */
					z-index: 2;
					/* 确保在背景之上 */
					display: block;
					/* 确保是块级元素 */
				}

				.text_1 {
					font-size: 32rpx;
					font-weight: 500;
					margin: 28rpx 0 0 22rpx;
					position: relative;
					/* 添加定位 */
					z-index: 2;
					/* 确保在背景之上 */
					display: block;
					/* 确保是块级元素 */
				}

				.text_3 {
					font-size: 24rpx;
					position: absolute;
					/* 添加定位 */
					z-index: 2;
					/* 确保在背景之上 */
					display: block;
					/* 确保是块级元素 */
					bottom: 30rpx;
					left: 22rpx;
				}
			}

			.banner {
				margin-top: 21rpx;
				width: 100%;
				/* 容器宽度占满 */
				position: relative;

				image {
					width: 100%;
					display: block;
				}
			}

			.menu_3 {
				display: flex;
				flex-direction: column;
				padding: 36rpx 39rpx 45rpx;
				margin-top: 21rpx;
				background: white;
				border-radius: 20px;

				.title3 {
					font-weight: 500;
					font-size: 34rpx;
					color: #333333;
					margin-bottom: 33rpx;
				}

				/* 容器样式 */
				.menu3_body {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					/* 创建4列 */
					row-gap: 35px;
					/* 行间距设置为35px */
				}

				/* 菜单项样式 */
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					/* 图标样式 */
					.icon {
						width: 45rpx;
						height: 45rpx;
						margin-bottom: 10rpx;
					}

					/* 文本样式 */
					.text {
						font-size: 24rpx;
						color: #333;
						text-align: center;
						margin-top: 18rpx;
					}
				}

				/* 让最后两个菜单项各占据2列 */
				// .item:nth-last-child(-n+2) {
				//   grid-column: span 2;
				// }
			}
		}
	}
</style>